import { React, useState } from "react";
import "./recharge.css";
import "../../../index.css";
import axios from "axios";
import orange from "../../../static/橘子.png";
import InterIP from '../../../IP/IP'
export default function Recharge() {
  var userID = document.cookie.slice(5);
  let IP = InterIP().props.children;
  const [money, setMoney] = useState();
  const [topupmoney, settopupmoney] = useState();

  function oncetopup() {
    axios.post("http://" + IP + ":3000/user/addmoney", {
      id: userID,
      money: topupmoney,
    })
      .then((res) => {
        setMoney((money) => (money += res.data.money));
      });
  }

  function topup(e) {
    settopupmoney((topupmoney) => (topupmoney = e.target.value));
  }

  axios.post("http://" + IP + ":3000/user/SelMoney", {
    id: userID,
  })
    .then((res) => {
      setMoney((money) => (money = res.data[0].money));
    });


  return (
    <div id="recharge">
      <div className="mybill_top">
        <span>账户余额:￥</span>
        <span>{money}</span>
      </div>
      <div className="recharge_bottom">
        <div>请选择充值金额</div>
        <div className="recharge_g">
          <input type="button" value="500" onClick={topup} className="recharge_zmr_input"></input>
          <input type="button" value="1000" onClick={topup} className="recharge_zmr_input"></input>
          <input type="button" value="1500" onClick={topup} className="recharge_zmr_input"></input>
        </div>
        <div className="recharge_youli">充值有礼</div>
        <div className="recharge_boxmain">
          <div className="recharge_main">
            <div className="recharge_main1">
              <div>冲500元送:</div>
              <div className="recharge_img">
                <img src={orange} alt="" />
              </div>
            </div>
            <div className="recharge_main1">
              <div>北极橘子25kg</div>
              <div>价值:500元</div>
            </div>
          </div>
          <div className="recharge_main">
            <div className="recharge_main1">
              <div>冲500元送:</div>
              <div className="recharge_img">
                <img src={orange} alt="" />
              </div>
            </div>
            <div className="recharge_main1">
              <div>南极橘子25kg</div>
              <div>价值:500元</div>
            </div>
          </div>
        </div>
        <div className="recharge_button">
          <button onClick={oncetopup}>立即充值</button>
        </div>
      </div>
    </div>
  );
}
